<template>
	<div class="content">
		<el-form ref="ruleFormRef" :rules="rules" class="userInfoContent" :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="小程序名称" prop="name">
        <el-input v-model="form.name"  autofocus/>
      </el-form-item>
      <el-form-item label="小程序二维码" prop="qrcodeUrl" v-if="false">
        <ImageUpload :t="new Date().getTime()" :img="form.qrcodeUrl"  @imgData="getImgData"></ImageUpload>
      </el-form-item>
      <el-form-item label="小程序类型" prop="type">
        <el-select placeholder="请选择小程序类型"   v-model="form.type">
          <el-option v-for="item in types" :label="item.dataName" :value="item.dataValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="应用ID" prop="appId">
        <el-input v-model="form.appId"/>
      </el-form-item>
      <el-form-item label="应用密钥" prop="appSecret">
        <el-input v-model="form.appSecret"/>
      </el-form-item>
      <el-form-item label="商户号" prop="merchantId">
        <el-input v-model="form.merchantId"/>
      </el-form-item>
      <el-form-item label="商户API私钥文件" prop="privateKeyPath">
        <el-input v-model="form.privateKeyPath" disabled/>
        <FileUpload @fileData="getFileData"></FileUpload>
      </el-form-item>
      <el-form-item label="商户API公钥文件" prop="publicKeyPath">
        <el-input v-model="form.publicKeyPath" disabled/>
        <FileUpload @fileData="getFileData2"></FileUpload>
      </el-form-item>
      <el-form-item label="公钥ID" prop="publicKeyId">
        <el-input v-model="form.publicKeyId"/>
      </el-form-item>
      <el-form-item label="商户证书序列号" prop="merchantSerialNumber">
        <el-input v-model="form.merchantSerialNumber"/>
      </el-form-item>
      <el-form-item label="商户APIV3密钥" prop="apiV3Key">
        <el-input v-model="form.apiV3Key"/>
      </el-form-item>
      <el-form-item label="所属店铺" prop="shopId">
        <el-select  v-model="form.shopId" placeholder="请选择店铺">
          <el-option
              v-for="item in shopinfoList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
        </el-select>
      </el-form-item>
		    <el-form-item style="margin-top:40px;">
				<el-button style="margin-left:180px;border-color: white;margin-right:20px;" type="primary" @click="onSubmit(ruleFormRef)">保存</el-button>
				<el-button style="color: darkgray;margin-right:20px;"  @click="resetForm(ruleFormRef)" >重置</el-button>
				<el-button type="info"  @click="close" >取消</el-button>
		    </el-form-item>
		</el-form>
	</div>
	
</template>

<script lang="ts" setup>
	import { reactive,ref, defineProps,toRefs,watchEffect,onMounted} from 'vue'
	import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
	import {info,update,save} from '@/api/dineinordering/minappconfig.ts'
  import ImageUpload from '@/components/ImageUpload/index.vue'
  import {useUserStore} from "@/stores/user.ts";
  import {shopinfolist} from '@/api/dineinordering/shopinfo.ts'
  import FileUpload from '@/components/FileUpload/index.vue'

  const getFileData=(val)=>{
    form.privateKeyPath=val;
  }
  const getFileData2=(val)=>{
    form.publicKeyPath=val;
  }
  const getImgData=(val)=>{
    form.qrcodeUrl=val
  }
  const userStore = useUserStore()
  const types=userStore.getDictData('minapp_type')
	const emit = defineEmits(['closeForm','success'])
	const props = defineProps(['id','t'])
	interface RuleForm {
	  id:any,
    name:string,
    qrcodeUrl:string,
    type:string,
    appId:string,
    appSecret:string,
    shopId:any,
    merchantId:string,
    privateKeyPath:string,
    merchantSerialNumber:string,
    apiV3Key:string,
    publicKeyPath:string,
    publicKeyId:string,
	}
	const ruleFormRef = ref<FormInstance>()
	const form = reactive<RuleForm>({
	  id:null,
    name:'',
    qrcodeUrl:'',
    type:'',
    appId:'',
    appSecret:'',
    shopId:null,
    merchantId:'',
    privateKeyPath:'',
    merchantSerialNumber:'',
    apiV3Key:'',
    publicKeyPath:'',
    publicKeyId:'',
	})
  const shopinfoList = ref([])
  const getShopInfoList=()=>{
    shopinfolist().then((res)=>{
      if(res.code === 200){
        shopinfoList.value = res.data;
      }
    })
  }
	onMounted(()=>{
    getShopInfoList()
	})
	
	watchEffect(()=>{
		const t = props.t
	    console.log("t",t)
		if(props.id){
			info(props.id).then((res)=>{
				if(res.code === 200){
					form.id=res.data.id
					form.name=res.data.name
					form.qrcodeUrl=res.data.qrcodeUrl
					form.type=res.data.type
					form.appId=res.data.appId
          form.appSecret=res.data.appSecret
          form.shopId=res.data.shopId
          form.merchantId=res.data.merchantId
          form.privateKeyPath=res.data.privateKeyPath
          form.publicKeyId=res.data.publicKeyId
          form.merchantSerialNumber=res.data.merchantSerialNumber
          form.apiV3Key=res.data.apiV3Key
          form.publicKeyPath=res.data.publicKeyPath
				}
			})
		}
	})
	
	const rules = reactive<FormRules<RuleForm>>({
    name:[{required:true,message:'小程序名称不能为空',trigger:'blur'}],
    type:[{required:true,message:'小程序类型不能为空',trigger:'blur'}],
    appId:[{required:true,message:'应用ID不能为空',trigger:'blur'}],
    appSecret:[{required:true,message:'应用密钥不能为空',trigger:'blur'}],
    qrcodeUrl:[{required:true,message:'小程序固定二维码不能为空',trigger:'blur'}],
    shopId:[{required:true,message:'店铺不能为空',trigger:'blur'}]
	})
	
	
	const onSubmit =  (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.validate(async(valid, fields) => {
	    if (valid) {
	      console.log('submit!')
		  const code2 = ref();
		  if(form.id != null){
			  const {code} = await update(form);
			  code2.value=code
		  }else{
			  const {code} = await save(form);
			  code2.value=code
		  }
		  if(code2.value === 200){
			  ElMessage({
				  type:'success',
				  message:'保存成功'
			  })
        resetForm(ruleFormRef.value)
			  emit('success')
		  }
	    } else {
	      console.log('error submit!', fields)
	    }
	  })
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
	  if (!formEl) return
	  formEl.resetFields()
	}
	const close = ()=>{
    resetForm(ruleFormRef.value)
		emit('closeForm')
	}
</script>

<style scoped>
	.content{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.userInfoContent{
		/* background-color: red; */
	}
</style>